<template>
  <div>
    <el-card v-if="color!='grey'" :body-style="{ padding: '0px' }" shadow="hover" :class="['template-card', color]" @click.native="open(data.id, data.item)">
      <div class="main">
        <div>
          <span>{{ data.name }}</span>
        </div>
        <div style="margin-top:3px">
          <span>{{ data.remark }}</span>
          <el-button @click.stop="remove" type="primary" plain><i class="el-icon-share"></i>删除</el-button>
        </div>
      </div>
      <div class="bottom clearfix">
        <span>{{ data.owner }}</span><span style="float:right"><svg-icon icon-class="chart" />&nbsp;{{ data.usageCount }}</span>
      </div>
    </el-card>
    <el-card v-if="color=='grey'" shadow="hover" class="template-card grey" @click.native="create()">
      <div style="text-align:center">
        <i class="el-icon-circle-plus" style="font-size: x-large;"></i>
        <div>新增空白</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TemplateCard',
  props: {
    data: {
      type: Object
    },
    color: String
  },
  data() {
    return {
    }
  },
  methods: {
    open(templateId, item) {
      this.$store.commit('SET_TEMP_OPEN', item)
      this.$router.push({ path: '/medicalRecord', query: {
        templateId: templateId
      }})
    },
    create() {
      this.$router.push({ path: '/medicalRecord', query: {
        templateOwner: this.data.templateOwner,
        templateOwnerName: this.data.templateOwnerName,
        templateOwnerType: this.data.templateOwnerType
      }})
    },
    remove() {
      this.$emit('del')
    }
  },
  mounted() {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .grey {
    border: 1px solid #a9b0bb;
    color: #a9b0bb;
    background-color: #f2f3f7;
  }
  .doctor {
    border: 1px solid #30cfc6;
    background-color: #eafaf9;
    .bottom {
      background-color: #30cfc6;
    }
  }
  .group {
    background-color: #f0f7fd;
    border: 1px solid #accee9;
    .bottom {
      background-color: #5a9dd3;
    }
  }
  .dept {
    border: 1px solid #76adda;
    background-color: #eef7fd;
    .bottom {
      background-color: #5fbbff;
    }
  }
  .hospital {
    border: 1px solid #5fadb3;
    background-color: #ebf5f6;
    .bottom {
      background-color: #3f9da4;
    }
  }
  .template-card {
    position: relative;
    width: 200px;
    height: 90px;
    margin: 10px;
    font-size: medium;
    cursor: pointer;
    .main {
      // text-align: center;
      // margin-top:20px;
      margin: 10px 0 0 10px;
      .el-button {
        float: right;
        border-top-left-radius: 30%;
        border-bottom-left-radius: 30%;
        padding: 2px;
        font-size: small
      }
    }
    .bottom {
      position: absolute;
      bottom: 0px;
      width:100%;
      height:30px;
      line-height: 25px;
      padding: 0 10px;
      margin-top:10px;
      color:white;
      font-size: small;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
  }
</style>
